'use client'
import React, { useState, useEffect, useContext } from 'react';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import AuthContext from '../../../context/AuthContext'
import { get } from '@/utils/axios'

export default function MemberDetailPage() {
  const [member, setMember] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const { id } = useParams()
  const { user, logout } = useContext(AuthContext)
  const router = useRouter()

  useEffect(() => {
    // 检查用户是否登录
    if (!user) {
      router.push('/auth/login')
      return
    }

    setLoading(false)
  }, [id, user, router])

  async function fetchMemberDetail() {
    try {
      const res = await get(`/api/user/${id}`)
      if (res.code != 200) {
        throw new Error('用户详情获取失败')
      }
      const data = await res.data
      setMember(data)
    } catch (err) {
      setError(err.message)
    }
  }

  useEffect(() => {
    if (id) {
      fetchMemberDetail()
    }
  }, [id])

  if (loading) {
    return <div className="text-center py-10">加载中...</div>
  }

  if (error) {
    return <div className="text-center py-10 text-red-500">{error}</div>
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center space-x-6">
              <Link href="/blog" className="text-xl font-bold text-indigo-600">
                我的博客
              </Link>
              <Link href="/members" className="text-gray-700 hover:text-indigo-600">
                会员管理
              </Link>
            </div>
            <div className="flex items-center">
              <div className="flex items-center space-x-4">
                <span className="text-gray-700">欢迎, {user?.name}</span>
                <button onClick={logout} className="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">
                  登出
                </button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex items-center mb-6">
          <Link href="/members" className="text-indigo-600 hover:text-indigo-900 mr-4">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
            </svg>
            返回列表
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">会员详情</h1>
        </div>

        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
          <div className="px-4 py-5 sm:px-6 flex flex-col md:flex-row items-center md:items-start">
            <img src={'https://picsum.photos/id/1027/200/200'} alt={member.name} className="w-24 h-24 rounded-full object-cover mb-4 md:mb-0 md:mr-6" />
            <div>
              <h2 className="text-2xl font-bold text-gray-900">{member.name}</h2>
              <p className="mt-1 max-w-2xl text-sm text-gray-500">{member.email}</p>
              <div className="mt-2 flex items-center">
                <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${member.role === '管理员' ? 'bg-green-100 text-green-800' : member.role === '高级会员' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'}`}>{member.role}</span>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-200">
            <dl>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">注册日期</dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{member.createdAt}</dd>
              </div>
              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">个人简介</dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{member.email}</dd>
              </div>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">发表文章数</dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{member.posts}</dd>
              </div>
            </dl>
          </div>
        </div>
      </main>
    </div>
  )
}